<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				涨跌颜色
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<div class="flex items-center justify-around">
					<div v-for="(item,index) in colorLists" :key="index" class="flex flex-col items-center mt-10px cursor-pointer" @click="changeColor(item)">
						<div class="rounded-8px w-160px h-160px border-1px border-solid border-#E5E6EB">
							<img :src="item.icon" class="w-full h-full rounded-8px">
						</div>
						<div class="mt-20px flex items-center">
							<div class="w-20px h-20px border-solid border-#B5B5B5 rounded-4px box-border mr-10px box-border flex items-center justify-center"
						:class="{'border-0px':radio1 == item.value,
						'border-1px':radio1 != item.value}">
								<img src="/transaction/c2c/orderSell/select-right.svg" class="w-24px h-24px" v-show="radio1 == item.value"/>
							</div>
							<p class="text-#7D8592 text-16px">{{ item.title }}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mt-60px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm()"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';


interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])

const radio1 = ref<string>('green-red');
const colorLists = ref<any[]>([
	{
		title:'绿涨红跌',
		value:'green-red',
		icon: '/person/green-red.jpg'
	},
	{
		title:'红涨绿跌',
		value:'red-green',
		icon: '/person/red-green.jpg'
	}
]);

const changeColor = (val: any) => {
	radio1.value = val.value;
}
const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}
</script>
<style lang="scss" scoped>


</style>
